<template>
  <nuxt-link
    :key="article.id"
    :to="{ name: 'photos-id', params: { id: article.id } }"
    class="uk-link-reset"
  >
    <div class="uk-card uk-card-muted">
      <!--      <div class="uk-card-media-top">-->
      <!--        &lt;!&ndash; <img :src="getStrapiMedia(article.image.url)" height="100" /> &ndash;&gt;-->
      <!--      </div>-->
      <!--      <div class="uk-card-body">-->
      <div>
        <!--        <hr class="uk-divider-small" />-->
        <div class="uk-grid-small uk-flex-left" data-uk-grid="true">
          <div>
            <img
              class="avatar"
              :src="getStrapiMedia(article.image.url)"
              style="position: static; border-radius: 10px; object-fit: cover"
              :alt="article.title"
            />
          </div>
          <p id="title" style="padding-bottom: 10px">{{ article.title }}</p>
          <!--          <div class="uk-width-expand">-->
          <!--            <p class="uk-margin-remove-bottom">{{ article.author.name }}</p>-->
          <!--          </div>-->
        </div>
      </div>
    </div>
  </nuxt-link>
</template>

<script>
import { getStrapiMedia } from "../utils/medias";

export default {
  props: {
    article: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    getStrapiMedia,
  },
};
</script>
